<template>
	<div class="left clearfix">
		<el-upload ref="upload" class="upload-demo" :action="httpMsg" :file-list="fileList" :on-success='uploadSuccess'
		:on-error='uploadFail'
		:headers="header"
		name="files"
		 :on-remove='removeRecord' :before-upload='beforeImgUpload' multiple  list-type="picture"
		 :on-change="onchange" :auto-upload="true">
			<el-button type="primary" ref="uploadButton" round v-show="false">点击上传</el-button>
		</el-upload>
		<div class="uploadnum" v-if="fileList.length == 0">
			<img src="@/assets/pngImg/nellData.png" alt="">
		</div>
	</div>
</template>
<script>
	import bus from '@/bus/bus.js'
	export default {
		data() {
			return {
				httpMsg: '',
				header:null,
				fileList: [], //图片列表渲染
				successNum: 0, //上传成功的数量
				uploadNum: 0, //上传总数量
				loadimgNum: 0, //正在上传数目
				faileNum: 0, //失败的数目
			};
		},
		mounted() {
			bus.$on('uploadClick', (ablumId) => {
				this.httpMsg = this.$store.state.baseHttp+'api/ablum/'+ablumId+'/picture';
				this.header = {
					"Authorization" : this.$store.state.token
				}
				this.$refs.uploadButton.$el.click()
			})
		},
		watch:{
			uploadNum(){
				bus.$emit('uploadNum',this.uploadNum)
			},
			successNum(){
				bus.$emit('successNum',this.successNum)
			},
		},
		methods: {
			beforeImgUpload(file) {
				this.uploadNum++; //上传总数目
				this.loadimgNum++; //正在上传的图片数目
				let toCase = file.name.split('.').pop().toLowerCase() //判断上传文件的样式
				
				// 上传验证
				
				if (toCase != 'jpg' && toCase != 'png' && toCase != 'svg' && toCase != 'gif'  && toCase != 'jpge') {
					// console.log(file.name)
					bus.$emit('loadFail', file, '格式不正确！')
					this.uploadNum--; //正在上传的图片数目
					this.faileNum++;
					this.$message.error(file.name+' 上传失败！')
					return false
				}
				
			},
			uploadSuccess(res, file, fileList) {
				this.loadimgNum--; //正在上传数目减一
				bus.$emit("loadSuccess", file) //发送中央事件
				this.successNum++; //成功数量+1
				this.$refs.upload.$data.uploadFiles.forEach(item=>{
					if(item.name == file.name) {
						let num = this.$refs.upload.$data.uploadFiles.indexOf(item)
						this.$refs.upload.$data.uploadFiles.splice(num,1)
					}
				})
		
				if (this.loadimgNum == 0) {
					bus.$emit("uploadFinish", this.uploadNum, this.successNum, this.faileNum)
				}
			},
			uploadFail(res, file, fileList){
				console.log('上传失败！')
				console.log(file)
				bus.$emit('loadFail', file, '网络错误！')
			},
			onchange(file, fileList) {

			},
			removeRecord(file, fileList) {

			}
		},

	}
</script>
<style scoped="scoped">
	.uploadnum {
		position: absolute;
		left: 50%;
		transform: translate(-50%,-50%);
		top: 50%;
		z-index: 9;
		width: 300px;
		height: 300px;
		transition: 1s;
	}


	.success {
		float: left;
	}

	.upload-demo {
		width: 100%;
		float: left;
		margin-top: 20px;
		box-sizing: border-box;
	}
	.left{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		padding: 10px  20px;
	}
	.left>>>.el-upload {
		position: absolute;
		left: 20px;
		top: 20px;
		width: 0;
		height: 0;
	}

	.left>>>.el-upload__tip {
		position: absolute;
		left: 150px;
		top: 25px;
	}
</style>
